<template>
	<view class="all">
		<u-navbar :is-back="true" title="物业费缴纳" :background="background" title-size="32" title-color="#000"
			:border-bottom="false"></u-navbar>

		<view class="main">
			<view class="background">
			</view>
			<view class="content">
				<view class="img">
					<image src="../../static/images/serch.png" mode="" @click="router('../search/search')"></image>
					<text v-if="user!=''">{{user.address}} . 业主：{{user.name}}</text>
				</view>
				<view class="paymoney">
					<view class="moneytop">
						<text class="month">{{user.month}}月份账单</text>
						<text @click="router('../../payrecord/payrecord')">历史缴费></text>
					</view>
					<view class="moneys" v-if="user.status==0">
						<text>{{user.money}} </text> 元
					</view>
					<view class="moneys2" v-if="user.status==1">
						<text>已缴费</text>
					</view>
				</view>
				<view class="tit">
					支付方式
				</view>
				<view class="pay_type">
					<view class="pay_l">
						<image src="../../static/images/wechat.png" mode="aspectFit"></image>
						<text>微信</text>
					</view>
					<view class="pay_r">
						<image src="../../static/images/chcked.png" mode=""></image>
					</view>
				</view>
				<view class="button" v-if="user.status==0" @click="pay">
					立即缴费
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import wxpay from '../../common/jswx.js';
	export default {

		data() {
			return {
				user: '',
				code: '',
			}
		},
		onLoad() {
			this.getcode()
		},
		onShow() {},
		methods: {
			router(path) {
				var that = this;
				uni.navigateTo({
					url: path,
					events: {
						//自定义一个监听器名, data为选择页面返回的数据
						selectType(data) {
							console.log(data);
							that.user = data
							console.log('返回值', that.user);

						}
					}
				})
			},
			pay() {
				global.$http.request({
					url: '/wechat/api/pay?orderId=' + this.user.id + '&openid=' + uni.getStorageSync('openid'),
					header: {
						'Authorization': uni.getStorageSync('token') //自定义请求头信息
					},
					data: {
						// orderId:this.user.id,
						// openid:uni.getStorageSync('openid')
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						console.log('支付配置', res.data.data);
						var that = this
						wxpay.payment(res.data.data, () => {
								uni.navigateBack({
									delta: 1
								})
							}),
							() => {
								uni.showToast({
									title: '支付失败',
									icon: 'none',
									duration: 1000
								})
							}

					}
				})
			},





			//getcode


			getcode() {
				if (uni.getStorageSync('openid') == '' || uni.getStorageSync('openid') ==
					undefined || uni.getStorageSync('openid') == null) {
					//通过code获取openid
					global.$http.request({
						url: '/wechat/api/userInfo', //请求后台路径
						header: {
							'Authorization': uni.getStorageSync('token') //自定义请求头信息
						},
						method: 'GET',
						data: {
							code: this.getUrlCode().code,
							returnUrl: 'http://wuyejf.app12345.cn/h5/',
						},
					}).then(res => {
						if (res.data.code == 200) {
							console.log(res.data.msg);
							uni.setStorageSync('openid', res.data.msg)
						}
					})
				}
			},
			//截取code
			getUrlCode() { // 截取url中的code方法
				var url = location.search
				console.log(url);
				var theRequest = new Object()
				if (url.indexOf("?") != -1) {
					var str = url.substr(1)
					var strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
					}
				}
				return theRequest
			},

		}
	}
</script>

<style lang="scss">
	page {
		font-family: Source Han Sans CN;
		background-color: #f7f7f7;

		.all {
			margin-top: 90rpx;
			.main {
				width: 750rpx;

				.background {
					width: 750rpx;
					height: 200rpx;
					background: #074D93;
					position: absolute;
					top: 0;
				}

				.content {
					position: absolute;
					top: 0;

					.img {
						display: flex;
						align-items: center;
						padding: 39rpx 8rpx;
						margin: 0 30rpx;

						image {
							width: 28rpx;
							height: 28rpx;
						}

						text {
							padding-left: 21rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #FFFFFF;
						}
					}

					.paymoney {
						margin: 0 30rpx;
						width: 690rpx;
						height: 234rpx;
						background: #FFFFFF;
						border-radius: 20rpx;

						.moneytop {
							width: 690rpx;
							padding: 44rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							font-size: 30rpx;
							font-weight: 400;
							color: #074D93;

							.month {
								font-size: 30rpx;
								font-weight: 500;
								color: #151515;
							}
						}

						.moneys {
							color: #FF0000;
							padding-left: 45rpx;

							text {
								padding-right: 15rpx;
								font-size: 52rpx;
								font-weight: 500;
							}
						}

						.moneys2 {
							padding-left: 45rpx;
							font-size: 52rpx;
							font-weight: 500;
							color: #074D93;
						}
					}

					.tit {
						margin: 122rpx 30rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #000000;
					}

					.pay_type {
						background-color: #fff;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 24rpx 20rpx;

						.pay_l {
							display: flex;
							align-items: center;

							image {
								width: 52rpx;
								height: 52rpx;
							}

							text {
								font-size: 32rpx;
								font-weight: 400;
								color: #000000;
								padding-left: 19rpx;
							}
						}

						.pay_r {
							image {
								width: 38rpx;
								height: 38rpx;
							}
						}
					}

					.button {
						width: 540rpx;
						margin: 276rpx auto 0 auto;
						height: 80rpx;
						text-align: center;
						line-height: 80rpx;
						background: #074D93;
						border-radius: 40rpx;

						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
		}

	}
</style>
